<template>
  <div class="receive-device">
    <div>
      <search-form
        v-model="searchForm"
        @search="search"
      ></search-form>
    </div>
    <div class="receive-device-container">
      <el-table
        size="mini"
        :data="showReceiveDeviceTableData"
        stripe
        border
      >
        <el-table-column
          prop="serialNumber"
          align="center"
          label="序列号"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="设备名称"
        ></el-table-column>
        <el-table-column
          align="center"
          label="操作"
          v-if="userGuardList.includes(guard.RouterManage)"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="remove(scope.row.uuid)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="receive-device-footer">
      <el-pagination
        background="#fff"
        @size-change="pageSizeChangeHandler"
        @current-change="currentPageChangeHandler"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="pageSizes"
        layout="total,sizes, prev, pager, next, jumper"
        :total="totalCount"
        align="right"
      ></el-pagination>
    </div>
  </div>

</template>

<script>
import SearchForm from './searchForm.vue';
export default {
  components: {
    SearchForm
  },
  props: {
    receiveDeviceTableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      showReceiveDeviceTableData: [],
      searchForm: {
        btnLoading: false,
        name: '',
        serialNumber: ''
      },
      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10, 20, 50, 100],
      totalCount: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.totalCount = this.receiveDeviceTableData.length;
      this.search();
    });
  },
  watch: {
    receiveDeviceTableData: {
      handler(val) {
        this.totalCount = val.length;
        this.search();
      }
    }
  },
  methods: {
    search() {
      const searchResultList = this.receiveDeviceTableData.filter(
        device => device.name.includes(this.searchForm.name) && device.serialNumber.includes(this.searchForm.serialNumber)
      );
      this.showReceiveDeviceTableData = searchResultList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
    remove(uuid) {
      const uuidList = this.receiveDeviceTableData.map(sendDevice => {
        return sendDevice.uuid;
      });
      this.receiveDeviceTableData.splice(uuidList.indexOf(uuid), 1);
      this.search();
    },
    pageSizeChangeHandler() {
      this.currentPage = 1;
      this.search();
    },
    currentPageChangeHandler() {
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.receive-device-footer {
  background-color: #fff;
}
</style>
